<template>
    <div class="all">
        <div class="head">
            <img src="https://s1.ljcdn.com/m-new/client/media/src/client/components/DownloadAppTopBanner/img/s-logo.6cec1c3e.png" alt="">
            <span>贝壳找房APP</span>
            <button @click="download">立即打开</button>
        </div>
        <div class="list">
            <div class="search">
                <span class="adr">北京</span>
                <span class="xiala"><img src="https://s1.ljcdn.com/m-new/client/media/src/client/pages/home/comp/Search/img/down-arrow.53810e2e.svg" alt=""></span>
                <div class="search-input">
                    <span class="fangdajing">
                        <img src="https://s1.ljcdn.com/m-new/client/media/src/client/pages/home/comp/Search/img/search.afdc092b.svg" alt="">
                    </span>
                    <input class="input1" type="text" placeholder="你想住哪里？">
                </div>
            </div>
            <!-- <van-grid :column-num="5">
                <van-grid-item v-for="value in list" :key="value.img" :icon="value.img" :text="value.text" class="aa" icon-size="500"/>
            </van-grid> -->
            <ul class="boxul">
                <li v-for="value in list" :key="value.img" class="box1">
                    <img :src="value.img" alt="">
                    <span>{{value.text}}</span>
                </li>
            </ul> 
        </div> 
        <div class="bj">
            <img src="https://s1.ljcdn.com/m-new/client/media/src/client/pages/home/comp/BeikeNum/img/bg.ad0ac08c.png" alt="">
        </div>

        <List1 :data1="data1"></List1>


    </div>
</template>

<script>
import List1 from '@/index/list1.vue'
import Vue from 'vue';
import { Grid, GridItem,Image } from 'vant';

Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Image);

export default{
    components: {
    List1
  },
    methods: {
        download(){
            window.location.href="https://linkm.ke.com/?schema=lianjiabeike%253A%252F%252Fershoufang%252Fhome%253FcityID%253D110000%2526source%253Dzhannei_baidu&redirect_url=http%253A%252F%252Fad.data.lianjia.com%252Fcallback%252Fsem%253FutmSource%253Dbaidu%2526utmMedium%253Dpinzhuan&ssid=&uuid=&refer=&ucid=&current_url=&sign=a565d68581bf3bdd0382235ae18042bd";
        }
    },
    data() {
        return {
            list:[
                {img:"https://storage.lynnn.cn/assets/markdown/public/pictures/2021/08/b17004fd6fa0a567f43b1defc2f52efc5780800c.png?sign=5e37db2393d735e3763bfa4f8fb11d8f&t=611149d3",text:"二手房"},
                {img:"https://storage.lynnn.cn/assets/markdown/public/pictures/2021/08/cbc398d9b422221200b9d58025df9204caecd765.png?sign=d74e068123d4770bebc2bab9b4cf8742&t=61114a74",text:"新房"},
                {img:"https://storage.lynnn.cn/assets/markdown/public/pictures/2021/08/94c53df52fbe0c7d49ceaac5551643c310fd21d8.png?sign=3b6ef52eafb738d7b615aeb4f4417073&t=61114a94",text:"租房"},
                {img:"https://storage.lynnn.cn/assets/markdown/public/pictures/2021/08/820091349b9df2bf99cce0f9ca19e594994522b0.png?sign=4055ff3f6edf26f74d73486957040f3c&t=61114ab1",text:"装修"},
                {img:"https://storage.lynnn.cn/assets/markdown/public/pictures/2021/08/c825d6a7de1f82e67f82ef7b14916ab40f317edf.png?sign=a11128b0afe461724a6d35b474acbd4f&t=61114ad0",text:"海外"},
                {img:"https://storage.lynnn.cn/assets/markdown/public/pictures/2021/08/0982ddf61ab546faac9d16c68e7015da284682c0.png?sign=7f43cf7e0b99a9aceac4f3c13a655a91&t=61114aeb",text:"商铺办公"},
                {img:"https://storage.lynnn.cn/assets/markdown/public/pictures/2021/08/3af53229418f8d847504d1f3e956a8dd8c9a0a7c.png?sign=f65947403fcb183caf19a71b8c784429&t=61114b05",text:"卖房"},
                {img:"https://storage.lynnn.cn/assets/markdown/public/pictures/2021/08/8aa19d88945f63f3c29ef077e922b4f40d0b6252.png?sign=5fd73547715221f06dcdbb38514f708c&t=61114b1f",text:"找小区"},
                {img:"https://storage.lynnn.cn/assets/markdown/public/pictures/2021/08/c93c018244e9a8c7f38590aef5b232ebbc76a6e2.png?sign=65ff985c46c637271cdb72a78df49d99&t=61114b38",text:"找经纪人"},
                {img:"https://storage.lynnn.cn/assets/markdown/public/pictures/2021/08/4d0831f9c72b41add789f6ca895e911e652a5676.png?sign=bfac8b5443fc785842ec7ea3569df513&t=61114b58",text:"问答"},
                {img:"https://storage.lynnn.cn/assets/markdown/public/pictures/2021/08/f5d24838a672e83ba5e8746d3250bf937ebfbc61.png?sign=3ab7a3dc526ba8d27038ca2fbc895a0c&t=61114b71",text:"百科"},
                {img:"https://storage.lynnn.cn/assets/markdown/public/pictures/2021/08/036f67b0f5cd4892901535d712a25194f007e666.png?sign=f527da32321ee05b44ab83c90dd1e1ff&t=61114b8e",text:"客服电话"},
                {img:"https://storage.lynnn.cn/assets/markdown/public/pictures/2021/08/700280f2eb56957b8f0c678bf8b9c1eb682bff65.png?sign=17db0fb9fd7f2184750c74b5bc5be80e&t=61114ba8",text:"房贷计算"},
            ],
            data1:{
                title:'二手房·全城必看好房',
                more:'更多二手房>',
                list1:[
                        {
                            img:"https://storage.lynnn.cn/assets/markdown/public/pictures/2021/08/ee927d1f803509a591332919804bc6f9efe13f09.jpeg?sign=4c094e51862cab9fdf83c12183c0286c&t=61129ad4",
                            span1:"2室1厅/86.49㎡",
                            span2:"44人关注此房",
                            span3:"760万",
                        },
                        {
                            img:"https://storage.lynnn.cn/assets/markdown/public/pictures/2021/08/86d8d3b15c75a30cd66b9c9a938007bfa06e0353.jpeg?sign=7405a1dce19b3ee0f2bedfa8a97b4101&t=61129b20",
                            span1:"2室1厅/78.03㎡",
                            span2:"38人关注此房",
                            span3:"798万",
                        },{
                            img:"https://storage.lynnn.cn/assets/markdown/public/pictures/2021/08/05caed980fab9307881b414c7ac10c6af44be1fe.jpeg?sign=3f20b8b68537c0e0c6b83c5c7dc6ed0b&t=61129b44",
                            span1:"3室1厅/79.02㎡",
                            span2:"70人关注此房",
                            span3:"758万",
                        },
                    ]
            },
        }
    },
}
</script>

<style lang='stylus' scoped>
@import '~@/assets/stylus/border.styl'
@import '~@/assets/stylus/ellipsis.styl'
.head
    padding 0.1rem 0.24rem
    display flex
    justify-content space-between
    box-shadow 0 0 0.05rem #E7E8EB
    img
        width 0.34rem
    button
        width 0.84rem  
        height 0.32rem  
        background-color #3072f6
        color #FFF  
        border-radius 0.08rem  
        border none 
    span 
        margin-left 0.11rem
        color #222
        font-size 0.17rem
        line-height 0.34rem
        font-weight bold
        flex-grow 1
.list
    padding 0.15rem 0.24rem
    .search
        box-shadow 0 0 0.05rem #E7E8EB
        padding 0.1rem 0.2rem
        margin-bottom 0.15rem
        display flex
        width 100%
        justify-content space-between
        .adr
            font-size 0.17rem
            font-weight bold
        .xiala
            width 0.06rem
            height 0.22rem
            margin-left 0.1rem
            padding-right 0.15rem
            margin-right 0.1rem
            border_1px(0 1px 0 0)
            
        .search-input
            flex-grow 1
            .input1
                border none
                margin-left 0.05rem
                font-weight bold  
                font-size 0.15rem        
            .fangdajing
                width 0.01rem

.aa
    height 0.7rem
.boxul
    display flex
    flex-wrap wrap
    justify-content flex-start
.box1  
    width 18%
    text-align center
    margin 0 0.03rem
    img 
        width 88%
.bj
    img 
        width 100%
.all
    overflow auto
</style>
<style lang="stylus">
body 
    overflow auto

</style>